/* eslint-disable array-callback-return */
import React, { useMemo } from 'react';
import { ProList } from '@ant-design/pro-components';
import { Button, Space, Tag } from 'antd';
import request from 'umi-request';
import { getFetch, doFetch } from '@/utils/doFetch';

const Mcard = ({
  path,
  actionRef,
  columns,
  rowKey = 'id',
  pageSize = 10,
  actions,
  headerTitle,
  avatar = false,
  dataSource,
  method = 'get'
}) => {

  const searchs = useMemo(() => {
    const result = {};
    const res = columns?.filter(column => column.valueType !== 'option' || column.search !== false)?.map(it => {
      let options = {};
      if (
        it.valueType === "select" ||
        it.valueType === "checkbox" ||
        it.valueType === "treeSelect"
      ) {
        if (Array.isArray(it.options)) {
          options = {
            fieldProps: {
              options: [...it.options],
            },
          };
        } else if (it.options) {
          options = {
            request: async (params) => {
              let list = await doFetch({
                url: it?.options?.path,
                params: it?.options?.params,
              });
              const res = list.data.dataList;
              return res;
            },
          };
        }
      }
      result[it.key] = {
        ...it,
        ...options
      }
    });

    return result

  }, [columns])

  const avatars = avatar ? {
    avatar: {
      dataIndex: columns[0]?.dataIndex,
      render: columns[0]?.render,
      search: false,
    },
  } : {};

  const titlekey = avatar ? columns[1]?.dataIndex : columns[0]?.dataIndex;
  const title = avatar ? columns[1].title : columns[0].title;
  const render = avatar ? columns[1]?.render : columns[0]?.render;

  const ifs = (i) => avatar ? (i === columns.length - 1 || i === 0 || i === 1) : (i === columns.length - 1 || i === 0)

  return (
    <ProList
      actionRef={actionRef}
      toolBarRender={() => actions}
      search={{
        filterType: 'light',
        placement: 'bottomLeft',
      }}
      rowKey={rowKey}
      headerTitle={headerTitle}
      dataSource={dataSource}
      request={async (params = {}) =>{
        delete params.current

        return method === 'post' ?
        doFetch({
          url: path, params: {
            ...params,
            pageIndex: params.current,
            pageSize: params.pageSize || pageSize,
          }
        }).then((res) => ({
          data: res.data?.page?.records ?? res?.data?.dataList,
          total: res.data?.page?.total ?? res?.data?.dataList?.length,
          current: params.current,
          success: true,
        }))
        :
        getFetch({
          url: path, params: {
            ...params,
            pageIndex: params.current,
            pageSize: params.pageSize || pageSize,
          }
        }).then((res) => ({
          data: res.data?.page?.records ?? res?.data?.dataList,
          total: res.data?.page?.total ?? res?.data?.dataList?.length,
          current: params.current,
          success: true,
        }))
      }}
      grid={{ gutter: 16, column: 1 }}
      pagination={{
        simple: true,
        showTotal: false
      }}
      itemCardProps={{
        ghost: true,
      }}
      showActions="hover"
      metas={{
        title: {
          dataIndex: titlekey,
          title: title,
          render: (_, row) => render ? render(_, row) : (
            <b className='oneline' style={{ flex: 1 }}>{
              row[titlekey]
            }</b>),
          search: false
        },
        ...avatars,
        content: {
          dataIndex: 'userName',
          render: (_, row) => (
            <div className='columns' style={{ gap: 6 }}>
              {
                columns?.map((it, i) => {
                  if (ifs(i)) {
                    return <></>
                  }
                  return <div style={{ display: "flex", gap: 10, alignItems: "baseline" }} key={it.key} size={0}>
                    <div>
                      {it?.title}
                    </div>
                    <b style={{ flex: 1, wordBreak: "break-all" }}>
                      {it?.render?.(row?.[it.dataIndex], row) ?? row?.[it.dataIndex] ?? "-"}
                    </b>
                  </div>
                })
              }
            </div>
          ),
          search: false,
        },
        actions: {
          cardActionProps: "actions",
          render: columns?.find((column) => column.valueType === 'option')?.render,
          search: false,
        },
        ...searchs
      }}
    />
  )
};

export default Mcard;
